<template>
  <div class="dashboard-editor-container">

    <panel-group :exam-paper-count="homeData?.examPaperCount" :question-count="homeData?.questionCount"
      :do-exam-paper-count="homeData?.doExamPaperCount" :do-question-count="homeData?.doQuestionCount" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <simple-line-chart  :user-action="homeData?.mothDayUserActionValue"  :x-labels="homeData?.mothDayText" />
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <month-line-chart :user-action = "homeData?.mothDayDoExamQuestionValue" :x-labels="homeData?.mothDayText" />
    </el-row>


    <el-row :gutter="8">
      <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 12 }"
        style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
      <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :lg="{ span: 6 }" :xl="{ span: 6 }"
        style="margin-bottom:30px;">
        <todo-list />
      </el-col>
      <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :lg="{ span: 6 }" :xl="{ span: 6 }"
        style="margin-bottom:30px;">
        <box-card />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import PanelGroup from './components/PanelGroup.vue'
import SimpleLineChart from './components/SimpleLineChart.vue'
import MonthLineChart from './components/MonthLineChart.vue'

import { ref, onMounted } from 'vue'



import { home } from "@/api/user";

const homeData = ref(null)
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  try {
    const res = await home()
    // 根据接口返回结构赋值
    homeData.value = res.response || res
    console.log(homeData.value);

  } catch (e) {
    console.error('获取首页数据失败', e)
  } finally {
    loading.value = false
  }
})

</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
